<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="box">
      <div class="box-1">
        <el-button type="danger" @click="addList()">添加工作模式</el-button>
        <!-- 表格 -->
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="工作模式编号"></el-table-column>
            <el-table-column prop="name" label="工作模式"></el-table-column>
            <el-table-column prop="workPatternTypeDesc" label="类型"></el-table-column>
            <el-table-column prop="workDate" label="工作日期"></el-table-column>
            <el-table-column label="工作时间" width="300">
              <template v-slot={row}>
                <span>{{((row.workEndMinute1 - row.workStartMinute1) / 60).toFixed(2) + '小时'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="165" class="caozuo">
              <template v-slot='{row}'>
                <el-button type="text" @click="addList(row.id)">编辑</el-button>
                <el-button type="text" class="btn" @click="del(row)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list1.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
         </el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
       <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="36%"
        @close="addDialogClosed">
        <span>
<!-- 编辑 -->
           <el-tabs v-model="activeName" @tab-click="handleClick" v-if="title==='编辑工作模式'">
            <el-tab-pane v-if="activeName === 'first'" label="礼拜制" name="first">
              <el-form :model="weekList" label-width="130px" :rules="rules">
                <el-form-item label="工作模式名称: " prop="name">
                  <el-input v-model="weekList.name" placeholder="请输入工作模式名称"></el-input>
                </el-form-item>
             
                <el-form-item label="连续工作天数: ">
                    <el-checkbox v-model="weekList.monday" label="周一"></el-checkbox>
                    <el-checkbox v-model="weekList.tuesday" label="周二"></el-checkbox>
                    <el-checkbox v-model="weekList.wednesday" label="周三"></el-checkbox>
                    <el-checkbox v-model="weekList.thursday" label="周四"></el-checkbox>
                    <el-checkbox v-model="weekList.friday" label="周五"></el-checkbox>
                    <el-checkbox v-model="weekList.saturday" label="周六"></el-checkbox>
                    <el-checkbox v-model="weekList.sunday"  label="周日"></el-checkbox>
                  <!-- 文字设置灰色 -->
                  <span class="tips-box">选中为工作时间,        未选中为未工作时间</span>
                </el-form-item>
                <el-form-item label="工作时间: ">
                  <el-time-picker 
                    is-range
                    v-model="weekList.timeList"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
              </el-form>

            </el-tab-pane>

            <el-tab-pane v-else label="连续制" name="second">
              <el-form :model="continuousList" label-width="130px" :rules="rules">
                <el-form-item label="工作模式名称: " prop="name">
                  <el-input v-model="continuousList.name" placeholder="请输入工作模式名称"></el-input>
                </el-form-item>

                 <div class="qazx">
                <el-form-item label="连续工作天数: " prop='workDayNum' >
                    <span class="qazx">上
                    <el-input v-model="continuousList.workDayNum" placeholder="请输入" class="shangxiu"><template slot="append">天</template></el-input>
                    </span>
                </el-form-item>
                <el-form-item  prop='restDayNum' style="margin-left: -123px;">
                    <span class="qqqq">休
                    <el-input v-model="continuousList.restDayNum" placeholder="请输入" class="shangxiu2"><template slot="append">天</template></el-input>
                    </span>
                </el-form-item>
                  </div>
                <el-form-item label="工作时间: ">
                  <el-time-picker 
                    is-range
                    v-model="continuousList.timeList"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
              </el-form>

            </el-tab-pane>
          </el-tabs>

<!--  添加 -->
           <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
            <el-tab-pane label="礼拜制" name="first">
              <el-form ref="fromList1" :model="weekList" label-width="130px" :rules="rules">
                <el-form-item label="工作模式名称: " prop="name">
                  <el-input v-model="weekList.name" placeholder="请输入工作模式名称"></el-input>
                </el-form-item>
             
                <el-form-item label="连续工作天数: ">
                    <el-checkbox v-model="weekList.monday" label="周一"></el-checkbox>
                    <el-checkbox v-model="weekList.tuesday" label="周二"></el-checkbox>
                    <el-checkbox v-model="weekList.wednesday" label="周三"></el-checkbox>
                    <el-checkbox v-model="weekList.thursday" label="周四"></el-checkbox>
                    <el-checkbox v-model="weekList.friday" label="周五"></el-checkbox>
                    <el-checkbox v-model="weekList.saturday" label="周六"></el-checkbox>
                    <el-checkbox v-model="weekList.sunday"  label="周日"></el-checkbox>
                  <!-- 文字设置灰色 -->
                  <span class="tips-box">选中为工作时间,        未选中为未工作时间</span>
                </el-form-item>
                <el-form-item label="工作时间: ">
                  <el-time-picker 
                    is-range
                    v-model="weekList.timeList"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
              </el-form>

            </el-tab-pane>

            <el-tab-pane label="连续制" name="second">
              <el-form ref="fromList2" :model="continuousList" label-width="130px" :rules="rules">
                <el-form-item label="工作模式名称: " prop="name">
                  <el-input v-model="continuousList.name" placeholder="请输入工作模式名称"></el-input>
                </el-form-item>
             
                  <div class="qazx">
                <el-form-item label="连续工作天数: " prop='workDayNum' >
                    <span class="qazx">上
                    <el-input v-model="continuousList.workDayNum" placeholder="请输入" class="shangxiu"><template slot="append">天</template></el-input>
                    </span>
                </el-form-item>
                <el-form-item  prop='restDayNum' style="margin-left: -123px;">
                    <span class="qqqq">休
                    <el-input v-model="continuousList.restDayNum" placeholder="请输入" class="shangxiu2"><template slot="append">天</template></el-input>
                    </span>
                </el-form-item>
                  </div>
                <el-form-item label="工作时间: ">
                  <el-time-picker 
                    is-range
                    v-model="continuousList.timeList"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
              </el-form>

            </el-tab-pane>
          </el-tabs>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="add">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import { addWorkHistory, deleteWorkHistory, updateWorkHistory, workHistoryInfo, workHistoryList } from '@/api/transit'
export default {
  data(){
    return {
      list1: {
        page: 1,
        pageSize: 10,
      },
      list:[],
      total: 0,
      dialogVisible: false,
      title:'新增工作模式',
      activeName: 'first', // 默认展示 页面
      checkList: [], //复选框的数据
      //礼拜制 周一到周日 
      weekList: {
        name:null,
        monday:0,//周一
        tuesday:0,//周二
        wednesday:0,//周三
        thursday:0,//周四
        friday:0,//周五
        saturday:0,//周六
        sunday:0,//周日
        timeList:null,//工作时间
        workPatternType:'1',//工作模式类型 1-礼拜制 2-连续制
      },
      //连续制
      continuousList:{ 
        name:null,
        workPatternType:'2',//工作模式类型 1-礼拜制 2-连续制
        workDayNum:'',//连续工作天数
        restDayNum:'',//连续休息天数
        timeList:null,//工作时间
      },
      rules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' },
        ],
        workDayNum: [
          { required: true, message: '请输入连续工作天数', trigger: 'blur' },
        ],
        restDayNum: [
          { required: true, message: '请输入连续休息天数', trigger: 'blur' },
        ],
        timeList: [
          { required: true, message: '请输入连续休息天数', trigger: 'blur' },
        ],
      
      }
    }
  },
  created(){
    this.orderListList()
  },
  methods:{
    // 点击tab切换
     handleClick(tab) {
      this.activeName = tab.name;
        console.log(1,tab.name);
      },
    async orderListList(){
     const {data } = await workHistoryList(this.list1)
    //  console.log(data);
     this.total = Number(data.counts)
     this.list = data.items
     console.log(data.counts);
    },
    // 添加/编辑 工作模式
   async addList(id){
      this.dialogVisible = true
      if(id){
        this.title = '编辑工作模式'
        const {data} = await workHistoryInfo(id)
        //判断数据类型 1-礼拜制 2-连续制
         if(data.workPatternType === 1){
          this.activeName = 'first'
         } else {
          this.activeName = 'second'
         }
        if(this.activeName === 'first'){
        // this.weekList.workPatternType = 1
        this.weekList = { 
          name:data.name,
          id: data.id,
          monday:(data.monday === 1 ? true : false),
          tuesday:(data.tuesday === 1 ? true : false),
          wednesday:(data.wednesday === 1 ? true : false),
          thursday:(data.thursday === 1 ? true : false),
          friday:(data.friday === 1 ? true : false),
          saturday:(data.saturday === 1 ? true : false),
          sunday:(data.sunday === 1 ? true : false),
          timeList:[
            new Date('2021-01-01 ' + data.workStartMinute1 / 60 + ':' + data.workStartMinute1 % 60),
            new Date('2021-01-01 ' + data.workEndMinute1 / 60 + ':' + data.workEndMinute1 % 60),
          ],
          workPatternType:'1',//工作模式类型 1-礼拜制 2-连续制
        }
          console.log('编辑礼拜制');
        } else {
          this.continuousList = {
            name:data.name,
            id: data.id,
            workPatternType:'2',//工作模式类型 1-礼拜制 2-连续制
            workDayNum: String(data.workDayNum) ,//连续工作天数
            restDayNum: String(data.restDayNum) ,//连续休息天数
            timeList:[
              new Date('2021-01-01 ' + data.workStartMinute1 / 60 + ':' + data.workStartMinute1 % 60),
              new Date('2021-01-01 ' + data.workEndMinute1 / 60 + ':' + data.workEndMinute1 % 60),
            ],
          }
          console.log('编辑连续制');

        }
     } else {
      this.title = '新增工作模式'
      }
    },
    // 复选框 选中的值
    changeList(val){
      this.checkList = val
    },
    // 确定
   async add(){
      if(this.title === '新增工作模式'){    
      // 确认添加 礼拜制 / 连续制
        if(this.activeName === 'first'){
           this.$refs.fromList1.validate(async (valid)=>{
          if(valid) {
          //格式化时间 传给后台 分钟 1小时 = 60分钟 1分钟 = 60秒 
            const workStartMinute1 = this.weekList.timeList[0].getHours() * 60 + this.weekList.timeList[0].getMinutes()
            const workEndMinute1 = this.weekList.timeList[1].getHours() * 60 + this.weekList.timeList[0].getMinutes()
            const name = this.weekList.name
            const workPatternType = this.weekList.workPatternType
            const monday = (this.weekList.monday === true ? 1 : 2)
            const tuesday = (this.weekList.tuesday === true ? 1 : 2)
            const wednesday = (this.weekList.wednesday === true ? 1 : 2)
            const thursday = (this.weekList.thursday === true ? 1 : 2)
            const friday = (this.weekList.friday === true ? 1 : 2)
            const saturday = (this.weekList.saturday === true ? 1 : 2)
            const sunday = (this.weekList.sunday === true ? 1 : 2)
            console.log(this.weekList.timeList);
            // 礼拜制
          await addWorkHistory({
              name,
              monday,
              tuesday,
              wednesday,
              thursday,
              friday,
              saturday,
              sunday,
              workPatternType,
              workStartMinute1,
              workEndMinute1 
            })
            console.log('确认添加 礼拜制');
            this.orderListList()
            this.dialogVisible = false
          } else {
            console.log('表单需要填写');
            return false;
          }
          })     
        } else {
         this.$refs.fromList2.validate(async (valid) => {
            if(valid) {
              console.log('确认添加 连续制')
          const name = this.continuousList.name
          const workPatternType = this.continuousList.workPatternType
          const workDayNum = this.continuousList.workDayNum
          const restDayNum = this.continuousList.restDayNum
          const workStartMinute1 = this.continuousList.timeList[0].getHours() * 60 + this.continuousList.timeList[0].getMinutes()
          const workEndMinute1 = this.continuousList.timeList[1].getHours() * 60 + this.continuousList.timeList[0].getMinutes()
          //连续制
          await addWorkHistory({
            name,
            workDayNum,
            restDayNum,
            workPatternType,
            workStartMinute1,
            workEndMinute1
          })
          this.$message.success('添加工作模式成功')
          this.orderListList()
          this.dialogVisible = false
          }
            }     
          )   
        } 
        // 确认编辑 礼拜制 / 连续制
      }else {
        //礼拜制
        if(this.activeName === 'first'){
          const workStartMinute1 = this.weekList.timeList[0].getHours() * 60 + this.weekList.timeList[0].getMinutes()
          const workEndMinute1 = this.weekList.timeList[1].getHours() * 60 + this.weekList.timeList[0].getMinutes()
          const name = this.weekList.name
          const id = this.weekList.id
          const workPatternType = this.weekList.workPatternType
          const monday = (this.weekList.monday === true ? 1 : 2)
          const tuesday = (this.weekList.tuesday === true ? 1 : 2)
          const wednesday = (this.weekList.wednesday === true ? 1 : 2)
          const thursday = (this.weekList.thursday === true ? 1 : 2)
          const friday = (this.weekList.friday === true ? 1 : 2)
          const saturday = (this.weekList.saturday === true ? 1 : 2)
          const sunday = (this.weekList.sunday === true ? 1 : 2)
          console.log(this.weekList.timeList);
          await updateWorkHistory({
              name,
              id,
              monday,
              tuesday,
              wednesday,
              thursday,
              friday,
              saturday,
              sunday,
              workPatternType,
              workStartMinute1,
              workEndMinute1
          })
           this.orderListList()
           this.dialogVisible = false
           console.log('确认编辑 礼拜制');

        //连续制
      } else {
        const name = this.continuousList.name
        const id = this.continuousList.id
        const workPatternType = this.continuousList.workPatternType
        const workDayNum = this.continuousList.workDayNum
        const restDayNum = this.continuousList.restDayNum
        const workStartMinute1 = this.continuousList.timeList[0].getHours() * 60 + this.continuousList.timeList[0].getMinutes()
        const workEndMinute1 = this.continuousList.timeList[1].getHours() * 60 + this.continuousList.timeList[0].getMinutes()
        await updateWorkHistory({
          name,
          id,
          restDayNum,
          workDayNum,
          workEndMinute1,
          workPatternType,
          workStartMinute1
        })
        this.orderListList()
        this.dialogVisible = false
        console.log('确认编辑 连续制');

      } 
      this.activeName= 'first'
      this.$message.success('编辑工作模式成功')
    }  
    },
    //关闭弹窗清空表单
    addDialogClosed(){
      this.weekList = {
        name:null,
        monday:0,//周一
        tuesday:0,//周二
        wednesday:0,//周三
        thursday:0,//周四
        friday:0,//周五
        saturday:0,//周六
        sunday:0,//周日
        timeList:null,
        workPatternType:1,//工作模式类型 1-礼拜制 2-连续制
      }
      this.continuousList = {
        name:null,
        workPatternType:2,//工作模式类型 1-礼拜制 2-连续制
        workDayNum:null,//连续工作天数
        restDayNum:null,//连续休息天数
        timeList:null,//工作时间
      }
      this.activeName= 'first'
      this.dialogVisible = false
    },
    //删除
    async del(row){
      console.log(row);
      await deleteWorkHistory(row.id)
      await this.$confirm('是否删除该工作模式?', '提示')
      this.$message.success('删除工作模式成功')
      this.orderListList()
    },
    //条数
    handleSizeChange(val) {
      this.list1.pageSize = val
      this.orderListList()
    },
    //页数
    handleCurrentChange(val) {
      this.list1.page = val
      this.orderListList()
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>  
::v-deep .el-table_1_column_6{
    text-align: center;
}
.qqqq{
  display: flex;
  margin-right: 20px;
}
.qazx{
  display: flex;
}
::v-deep .el-pagination{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
::v-deep .shangxiu{
  margin-left: 10px;
  width: 140px;
  padding-right: 10px;
}
::v-deep .shangxiu2{
  margin-left: 10px;
  width: 140px;
}
::v-deep .tips-box{
  color: #bec3cf;
}
.caozuo{
  text-align: center;
  display: flex;

}
.btn{
  color: #e15536;
}
.box{
  margin: 20px;
  background-color: #fff;
  .box-1{
    padding: 30px;
    .el-table{
      margin-top: 20px;
    }
  }
}
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination{
  padding-bottom: 30px;
}
::v-deep .el-tabs__item.is-active {
    color: #e15536!important;
}
::v-deep .el-tabs__item:hover{
     color: ''!important; 
     cursor: pointer; 
}
::v-deep .el-tabs__item.is-active{
     color: ''!important; 
     cursor: pointer; 
}
 ::v-deep .el-tabs__active-bar {
    background-color: #e15536!important;
  }
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
 
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 30px 70px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
.el-checkbox{
  margin-right: 2px !important;
}
</style>
